
require("../../assets/css/index.less")
require("../../assets/iconfont/iconfont.css")
require("./register.less")

//简单获取元素方式
function $(select) {
    return document.querySelector(select)
}
//引入axios插件
const axios = require("axios")
// 引入验证码插件
const CaptchaMini = require("captcha-mini")

//引入
const request = require("../../lib/requst");

// Dom加载完成再执行下面内容
window.onload = () => {
    //手机号失焦验证
    let reg2 = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
    $(".phone_num").addEventListener("blur", function () {
        if (!reg2.test($(".phone_num").value)) {
            this.style = `
     border:2px solid red;
     `
        } else {
            this.style = `
        border:2px solid green;
        `
        }
    })
    //验证码
    /*不传值，统一走默认值*/
    let captcha1 = new CaptchaMini({
        fontSize: 60, //验证码字体大小
        length: 4,   //验证码长度
        lineWidth: 1,   //线条宽度
        lineNum: 6,       //线条数量
        dotR: 2,          //点的半径
        dotNum: 25,       //点的数量
    });
    //r为图片中的验证码
    captcha1.draw(document.querySelector('.test_img'), r => {
        console.log(r, '验证码1')
        $(".test_num").addEventListener("blur", function () {
            if ($(".test_num").value == r) {
                this.style = `
            border:2px solid green;
            `
            } else {
                this.style = `
            border:2px solid red;
            `
            }
        })
    });


    //密码失焦验证
    let reg4 = /^\w{6,12}$/;
    $(".pwd").addEventListener("blur", function () {
        if (!reg4.test($(".pwd").value)) {
            this.style = `
        border:2px solid red;
        `
        } else {
            this.style = `
           border:2px solid green;
           `
        }
    })
    //确认密码失焦验证
    $(".pwd_sure").addEventListener("blur", function () {
        if ($(".pwd").value == $(".pwd_sure").value) {
            this.style = `
        border:2px solid green;
        `
        } else {
            this.style = `
           border:2px solid red;
           `
        }
    })

    //提交验证
    $(".bt_rg").addEventListener("click", function () {
        if (!reg2.test($(".phone_num").value)) {
            $(".phone_num").style = `
        border:2px solid red;
        `
        } else if (!reg4.test($(".pwd").value)) {
            $(".pwd").style = `
        border:2px solid red;
        `
        } else if ($(".pwd").value !== $(".pwd_sure").value) {
            $(".pwd_sure").style = `
        border:2px solid red;
        `
        } else {
            request.post("/api/user/register", {
                account: `${$(".phone_num").value}`,
                password: `${$(".pwd").value}`
            }).then(res => {
                if (res.data.errno === 0) {
                    $(".tishi").style.display = "flex";
                    $(".success").textContent = "注册成功",
                        $(".icon_x").classList.remove("icon-cuowu");
                    $(".icon_x").classList.add("icon-zhengque")
                    setTimeout(() => {
                        location.href = "./login.html"
                    }, 2000);
                } else {
                    $(".tishi").style.display = "flex";
                    $(".success").textContent = "注册失败",
                        $(".icon_x").classList.remove("icon-zhengque");
                    $(".icon_x").classList.add("icon-cuowu")
                    setTimeout(() => {
                        $(".tishi").style.display = "none";
                    }, 2000);
                }
            })
        }
    })

}

